<script setup lang="js">
  import { ref } from 'vue';
  import { useRouter, useRoute } from 'vue-router'
  import { ElMessage } from "element-plus";
  import MarkdownView from '../../components/MarkdownView/index.vue'
  import request from '../../request/axios'
  import { fileIco } from '../../utils'
  import { formatDateTimeWithTimestamp, getCurrentDateTime } from '../../utils/time'

  const route = useRoute() // 获取路由对象

  const chatMesList = ref([]);

  const getShareList = async () => {
    try {
      const res = await request.getV2({ url: `/v1/api-collect-details?id=${route.query.id}` })
      if (res.code == 200) {
        chatMesList.value = res.data;
      }
    } catch (error) {
      console.log(error)
    }
  }
  getShareList();
  // 初始化icon
  const formattingIcon = name => {
    if (!name) return
    return fileIco(name)
  }
  const fileIcon = name => {
    const icon = formattingIcon(name)
    const image = new URL(
      `../../assets/image/file-ico/ico-${icon}.png`,
      import.meta.url
    ).href
    return image
  }

</script>

<template>
  <div class="overflow-none chat-message-list share-content">
    <div v-for="(item, index) in chatMesList" :key="index">

      <div v-if="item.content" :class="['user-message', {'message-checked' : item.userChecked && isShareBox} ]">
        <el-checkbox v-if="isShareBox" v-model="item.userChecked" class="checkbox-content" size="large" />
        <div class="message-time">{{formatDateTimeWithTimestamp(item.create_time)}}</div>
        <div v-if="item.file_name" class="message-test message-file">
          <img :src="fileIcon(item.file_name)" style="width: 40px;">
          <div class="nowrap-hide file-name">{{item.file_name}}</div>
        </div>
        <div style="width: 100%;height: 20px;"></div>
        <div class="message-test">
          <MarkdownView :content="item.content"></MarkdownView>
        </div>
      </div>

      <div :class="['ai-message', {'message-checked' : item.agentChecked && isShareBox} ]">
        <el-checkbox v-if="isShareBox" v-model="item.agentChecked" class="checkbox-content" size="large" />
        <div v-if="isShareBox" style="width: 40px;"></div>
        <img class="ai-avatar" v-if="item.model_content || item.reasoning_content || item.model_reasoning_content" src="../../assets/image/icon/model-image.png" />
        <div class="ai-test">
          <div class="model-content" v-if="item.reasoning_content || item.model_reasoning_content">
            <div class="model-box">{{item.reasoning_content || item.model_reasoning_content}}</div>
          </div>
          <img src="../../assets/image/loading.gif" v-if="item.loadingShow" class="icon-loading" />
          <MarkdownView :content="item.model_content"></MarkdownView>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .share-content {
    width: 800px;
  }

  .chat-message-list {
    height: 96vh;
    margin: 20px 0;
    margin-bottom: 3vh;
    overflow: hidden;
    overflow-y: auto;

    .ai-message,
    .user-message {
      display: flex;
      align-items: start;
      justify-content: end;
      flex-wrap: wrap;
      margin-bottom: 10px;
      position: relative;
      padding: 10px;

      .message-test {
        font-size: 16px;
        color: #3d3d3d;
        padding: 10px 18px;
        max-width: 80%;
        border-radius: 12px;
        background: #dcecf3;
      }

      .message-time {
        width: 100%;
        font-size: 14px;
        color: #999;
        text-align: right;
        margin-bottom: 8px;
      }

      .message-file {
        display: flex;
        align-items: flex-start;
        cursor: pointer;

        .file-name {
          max-width: 140px;
          margin-left: 8px;
        }

        img {
          width: 20px;
          margin-right: 4px;
        }
      }
    }

    .message-checked {
      border-radius: 12px;
      background-color: #FAFBFF;
      box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.08);
    }

    .ai-message {
      justify-content: start;
      flex-wrap: wrap;

      .ai-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }

      .ai-test {
        margin-left: 12px;
        max-width: 80%;
      }

      .model-content {
        border: 1px solid #c9c9c9;
        width: 100%;
        border-radius: 8px;
        padding: 10px;
        margin-bottom: 10px;

        .model-title {
          font-weight: 500;
          font-size: 16px;
          line-height: 24px;
          height: 32px;
          display: flex;
          align-items: center;
          color: #333;
          margin-bottom: 12px;
          position: relative;
        }

        .model-box {
          color: #666;
          line-height: 24px;
          font-size: 14px;
        }
      }

      .ai-research {
        display: flex;
        align-items: center;
        margin-top: 12px;

        span {
          color: #ff0000;
          font-size: 14px;
          padding: 5px 12px;
          border-radius: 8px;
          cursor: pointer;
          border: 1px solid #ff0000;
          background: rgba(255, 0, 0, 0.1);

          &:nth-child(1) {
            margin-right: 8px;
            color: #2d66b3;
            border: 1px solid #2d66b3;
            background: rgba(45, 102, 179, 0.1);
          }
        }
      }

      .ai-assistant {
        margin-top: 12px;
        cursor: pointer;

        .assistant-icon {
          width: 20px;
          height: 20px;
          margin-right: 6px;
        }
      }
    }
  }
</style>